<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>会员页面</title>
    <link rel="stylesheet" href="../../res/layui/css/layui.css" media="all">

    <style type="text/css">
        body{
            margin:20px 0px;
        }
    </style>
</head>
<body>
<div class="demoTable">
    搜索会员名称:
    <div class="layui-inline">
        <input class="layui-input" name="memberName" id="demoReload" autocomplete="off" placeholder="请输入会员名">
    </div>
    <input  type="button" class="layui-btn" data-type="reload" id="queryBtn" value="搜索">
    <input type="button"  class="layui-btn" id="memberAdd" data-type="add" value="增加">
</div>
<table class="layui-hide" id="member" lay-filter="demo"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit" id="imgUpdate">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script src="../../res/layui/layui.js"></script>
<script>
    var table = null ;
    var index = 0 ;
    var layer = null ;

    layui.use(['laydate', 'laypage', 'layer', 'table', 'upload', 'element'], function(){
        var laydate = layui.laydate //日期
            ,laypage = layui.laypage //分页
            layer = layui.layer //弹层
            ,table = layui.table //表格
            ,upload = layui.upload //上传
            ,element = layui.element; //元素操作


        //监听Tab切换
        element.on('tab(demo)', function(data){
            layer.msg('切换了：'+ this.innerHTML);
            console.log(data);
        });

        //执行一个 table 实例
        table.render({
            elem: '#member'
            ,width:'100%'
            ,height: 480
            ,url: '../../user/findAll.action' //数据接口
            ,page: true //开启分页
            ,method:'post'
            ,cols: [[ //表头
                {type:'checkbox', fixed: 'left'}
                ,{field: 'userId', title: '会员ID', width:90, fixed: 'left'}
                ,{field: 'userName', title: '姓名', width:80}
                ,{field: 'userAccount', title: '会员账号', width:90}
                ,{field: 'userPassword', title: '密码', width:120}
                ,{field: 'remark', title: '会员说明', width: 90}
                ,{field: 'file', title: '照片', width:120,templet:'<div><img src="../../{{ d.file}}" alt="无"></div>'}
                ,{fixed: 'right',title: '操作', width: 140, align:'center', toolbar: '#barDemo'}
            ]]
            ,id: 'testReload'
        });

        //监听工具条
        table.on('tool(demo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'del'){
                var memberId=data.userId;

                layer.confirm('确认删除？', function(index){
                    /* obj.del(); */ //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //使用jquery的ajax方式向后台提交数据
                    var url = "/user/deleteById.action";
                    var data={userId:memberId};
                    $.post(url,data,function(data){
                        if(data.state=="1"){
                            layer.msg('删除成功', {
                                icon: 1,
                                time: 1000 //1秒关闭（如果不配置，默认是3秒）
                            }, function(){
                                table.reload('testReload'); // 表格刷新
                            });
                        }else {
                            layer.msg('删除失败', {
                                icon: 1,
                                time: 1000 //1秒关闭（如果不配置，默认是3秒）
                            })
                        }

                    });
                });
            }else if(layEvent==='edit'){
                var memberId=data.userId;

                //使用jquery的ajax方式向后台提交数据
                var url = "/user/showUpdate.action";
                var data={userId:memberId};
                $.post(url,data,function(data){
                    index = layer.open({
                        type: 2,
                        area : ['60%' , '80%'],//弹出框大小
                        shift:1,//弹出框动画效果
                        content: ['form.html','on'], //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                        success:function(k,inx){
                            console.info(k);
                            var body = layer.getChildFrame('body',inx);//确定两个页面之间的父子关系

                            //console.log(body.html()) //得到iframe页的body内容
                            body.find("#userId").val(data.userId);
                            body.find("#userName").val(data.userName);
                            body.find("#userPassword").val(data.userPassword);
                            body.find("#remark").val(data.remark);
                            body.find("#userAccount").val(data.userAccount);
                            body.find("#file").val(data.file);
                            var updateImg = body.find("#updateImg");
                            if(data.file!=""){
                                updateImg.show();
                                updateImg.prop("src","/"+data.file);
                            }
                        }
                    });
                },"json");
            }
        });

        //条件查询
        var $ = layui.$;

        $('#queryBtn').on('click', function(){

            //执行重载
            table.reload('testReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                ,where: {
                    userName: $('#demoReload').val()
                }
            });
        });
        $('#memberAdd').on('click', function(){
            index = layer.open({
                type: 	2,
                area : ['500px' , '500px'],//弹出框大小
                shift:1,//弹出框动画效果
                content: ['form.html','on'] //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
            });
        });
    });

</script>
</body>
</html>